<template>
  <div class="captcha-input">
    <div class="input-box">
      <el-input v-model="code" placeholder="请输入验证码">
        <!-- <span slot="prefix" class="svg-container">
          <svg-icon icon-class="Captcha" />
        </span> -->
      </el-input>
    </div>
    <div class="imgbox">
      <img
        :src="imgUrl"
        alt="图形验证码"
        class="captcha-img"
        @click="getCaptcha"
      />
    </div>
  </div>
</template>
<script>
import { getCaptcha } from "@/api/common";
export default {
  props: {
    value: String,
  },
  data() {
    return {
      code: "",
      imgUrl: "",
    };
  },
  watch: {
    code(newVal) {
      this.$emit("input", newVal);
    },
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    getCaptcha() {
      getCaptcha().then((res) => {
        this.imgUrl = "data:image/gif;base64," + res.result.img;
        this.$emit("getCodeKey", res.result.uuid);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.captcha-input {
  display: flex;
  .input-box {
    flex: 1;
  }
  img {
    display: block;
    width: 108px;
    height: 47px;
    cursor: pointer;
    border: 1px solid #F8F8F8;
    border-radius: 2px;
  }
}
.imgbox{
  width: 120px;
  background-color: #fff;
  display: flex;
  justify-content: flex-end;
  margin-left: 13px;
}
.svg-container {
  color: #2d3a4b;
  padding-left: 4px;
  svg {
    width: 20px;
    vertical-align: middle;
  }
}
</style>
